<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> CSS 各种提示信息框</title>
</head>
<body>
<H2>注意</H2>
<div class="danger">
<p><strong>Danger!</strong>红灯区。。。</p>
</div>
<div class="success">
<p><strong>Success!</strong>成功了。。。</p>
</div>
<div class="info">
<p><strong>Info!</strong>开车信息。。。</p>
</div>
<div class="warning">
<p><strong>Warning!</strong>没有会员不能进。。。</p>
</div>
<style>
    .danger{
        background-color: indianred;
        border-left: solid 10px red;
    }
    .success{
        background-color: greenyellow;
        border-left: solid 10px green;
    }
    .info{
        background-color: gray;
        border-left: dimgray;
    }
    .warning{
        background-color: yellowgreen;
        border-left: solid 10px yellow;
    }
    div{
        width: 100%;
    }

    p{
        padding: 16px 0;
    }



</style>
</body>
</html>
